React experimental_useContextSelector: 컨텍스트 최적화 마스터하기

React의 Context API는 prop 드릴링 없이 컴포넌트 트리 전체에 데이터를 공유할 수 있는 강력한 메커니즘을 제공합니다. 그러나 컨텍스트 값이 자주 변경되는 복잡한 애플리케이션에서는 React Context의 기본 동작이 불필요한 리렌더링을 유발하여 성능에 영향을 미칠 수 있습니다. 바로 이 지점에서 experimental_useContextSelector가 등장합니다. 이 블로그 포스트에서는 React 컨텍스트 사용을 최적화하기 위해 experimental_useContextSelector를 이해하고 구현하는 방법을 안내합니다.

React 컨텍스트 문제 이해하기

experimental_useContextSelector를 살펴보기 전에, 이것이 해결하고자 하는 근본적인 문제를 이해하는 것이 중요합니다. 컨텍스트 값이 변경되면, 해당 컨텍스트를 사용하는 모든 컴포넌트는 컨텍스트 값의 일부만 사용하더라도 리렌더링됩니다. 이러한 무분별한 리렌더링은 특히 복잡한 UI를 가진 대규모 애플리케이션에서 심각한 성능 병목 현상을 일으킬 수 있습니다.

전역 테마 컨텍스트를 예로 들어보겠습니다:

            const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
  accentColor: 'blue'
});

function ThemedComponent() {
  const { theme, accentColor } = React.useContext(ThemeContext);
  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current Theme: {theme}</p>
      <p>Accent Color: {accentColor}</p>
    </div>
  );
}

function ThemeToggleButton() {
  const { toggleTheme } = React.useContext(ThemeContext);
  return (<button onClick={toggleTheme}>Toggle Theme</button>);
}

            

              
                Copy
              
            
          

만약 accentColor가 변경되면, ThemeToggleButton은 toggleTheme 함수만 사용함에도 불구하고 리렌더링됩니다. 이 불필요한 리렌더링은 자원 낭비이며 성능을 저하시킬 수 있습니다.

experimental_useContextSelector 소개

React의 불안정(실험적) API의 일부인 experimental_useContextSelector는 컨텍스트 값의 특정 부분만 구독할 수 있게 해줍니다. 이 선택적 구독은 컴포넌트가 사용하는 컨텍스트의 일부가 실제로 변경되었을 때만 컴포넌트가 리렌더링되도록 보장합니다. 이는 불필요한 리렌더링 횟수를 줄여 상당한 성능 향상을 가져옵니다.

중요 참고: experimental_useContextSelector는 실험적 API이므로, 향후 React 버전에서 변경되거나 제거될 수 있습니다. 주의해서 사용하고 필요한 경우 코드를 업데이트할 준비를 해야 합니다.

experimental_useContextSelector의 작동 방식

experimental_useContextSelector는 두 가지 인수를 받습니다:

1. 컨텍스트 객체: React.createContext를 사용하여 생성한 컨텍스트 객체입니다.
2. 셀렉터 함수: 전체 컨텍스트 값을 입력으로 받아 컴포넌트가 필요로 하는 특정 컨텍스트 부분을 반환하는 함수입니다.

셀렉터 함수는 필터 역할을 하여 컨텍스트에서 관련 데이터만 추출할 수 있게 해줍니다. 그러면 React는 이 셀렉터를 사용하여 컨텍스트 값이 변경될 때 컴포넌트가 리렌더링되어야 하는지를 결정합니다.

experimental_useContextSelector 구현하기

이전 예제를 experimental_useContextSelector를 사용하도록 리팩터링해 보겠습니다:

            import { unstable_useContextSelector as useContextSelector } from 'react';

const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
  accentColor: 'blue'
});

function ThemedComponent() {
  const { theme, accentColor } = useContextSelector(ThemeContext, (value) => ({
    theme: value.theme,
    accentColor: value.accentColor
  }));

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current Theme: {theme}</p>
      <p>Accent Color: {accentColor}</p>
    </div>
  );
}

function ThemeToggleButton() {
  const toggleTheme = useContextSelector(ThemeContext, (value) => value.toggleTheme);
  return (<button onClick={toggleTheme}>Toggle Theme</button>);
}

            

              
                Copy
              
            
          

이 리팩터링된 코드에서는:

• unstable_useContextSelector를 import하고 간결성을 위해 useContextSelector로 이름을 바꿉니다.
• ThemedComponent에서 셀렉터 함수는 컨텍스트에서 theme과 accentColor만 추출합니다.
• ThemeToggleButton에서 셀렉터 함수는 컨텍스트에서 toggleTheme만 추출합니다.

이제 accentColor가 변경되어도, ThemeToggleButton은 더 이상 리렌더링되지 않습니다. 왜냐하면 이 컴포넌트의 셀렉터 함수는 toggleTheme에만 의존하기 때문입니다. 이것이 바로 experimental_useContextSelector가 어떻게 불필요한 리렌더링을 방지할 수 있는지를 보여줍니다.

experimental_useContextSelector 사용의 이점

• 성능 향상: 불필요한 리렌더링을 줄여 특히 복잡한 애플리케이션에서 더 나은 성능을 제공합니다.
• 세분화된 제어: 컨텍스트가 변경될 때 어떤 컴포넌트가 리렌더링될지 정밀하게 제어할 수 있습니다.
• 단순화된 최적화: 복잡한 메모이제이션 기술에 의존하지 않고 컨텍스트 사용을 최적화할 수 있는 간단한 방법을 제공합니다.

고려사항 및 잠재적 단점

• 실험적 API: 실험적 API로서 experimental_useContextSelector는 변경되거나 제거될 수 있습니다. React 릴리스 노트를 주시하고 코드를 수정할 준비를 해야 합니다.
• 복잡성 증가: 일반적으로 최적화를 단순화하지만, 코드에 약간의 복잡성을 추가할 수 있습니다. 도입하기 전에 추가된 복잡성보다 이점이 더 큰지 확인하십시오.
• 셀렉터 함수 성능: 셀렉터 함수는 성능이 좋아야 합니다. 셀렉터 내에서 복잡한 계산이나 비용이 많이 드는 작업을 피하십시오. 이는 성능상의 이점을 상쇄할 수 있습니다.
• 스테일 클로저(Stale Closure) 가능성: 셀렉터 함수 내에서 발생할 수 있는 스테일 클로저에 유의해야 합니다. 셀렉터 함수가 최신 컨텍스트 값에 접근할 수 있도록 하십시오. 필요한 경우 useCallback을 사용하여 셀렉터 함수를 메모이제이션하는 것을 고려하십시오.

실제 예제 및 사용 사례

experimental_useContextSelector는 다음과 같은 시나리오에서 특히 유용합니다:

• 대규모 폼: 컨텍스트로 폼 상태를 관리할 때, experimental_useContextSelector를 사용하여 상태 변경에 직접적인 영향을 받는 입력 필드만 리렌더링합니다. 예를 들어, 전자상거래 플랫폼의 결제 폼은 주소, 결제 및 배송 옵션 변경 시 리렌더링을 최적화하여 큰 이점을 얻을 수 있습니다.
• 복잡한 데이터 그리드: 수많은 열과 행이 있는 데이터 그리드에서, experimental_useContextSelector를 사용하여 특정 셀이나 행만 업데이트될 때 리렌더링을 최적화합니다. 실시간 주가를 표시하는 금융 대시보드는 이를 활용하여 전체 대시보드를 리렌더링하지 않고 개별 주식 시세를 효율적으로 업데이트할 수 있습니다.
• 테마 시스템: 이전 예제에서 보여주었듯이, experimental_useContextSelector를 사용하여 테마가 변경될 때 특정 테마 속성에 의존하는 컴포넌트만 리렌더링되도록 합니다. 대규모 조직을 위한 글로벌 스타일 가이드는 동적으로 변경되는 복잡한 테마를 구현할 수 있으므로 이 최적화가 매우 중요합니다.
• 인증 컨텍스트: 컨텍스트로 인증 상태(예: 사용자 로그인 상태, 사용자 역할)를 관리할 때, experimental_useContextSelector를 사용하여 인증 상태 변경에 의존하는 컴포넌트만 리렌더링합니다. 다양한 계정 유형에 따라 기능이 잠금 해제되는 구독 기반 웹사이트를 생각해보십시오. 사용자의 구독 유형 변경은 해당되는 컴포넌트에만 리렌더링을 트리거할 것입니다.
• 국제화(i18n) 컨텍스트: 컨텍스트로 현재 선택된 언어 또는 로케일 설정을 관리할 때, experimental_useContextSelector를 사용하여 텍스트 콘텐츠를 업데이트해야 하는 컴포넌트만 리렌더링합니다. 여러 언어를 지원하는 여행 예약 웹사이트는 이를 사용하여 다른 사이트 요소에 불필요한 영향을 주지 않고 UI 요소의 텍스트를 새로 고칠 수 있습니다.

experimental_useContextSelector 사용을 위한 모범 사례

• 프로파일링으로 시작하기: experimental_useContextSelector를 구현하기 전에, React 프로파일러를 사용하여 컨텍스트 변경으로 인해 불필요하게 리렌더링되는 컴포넌트를 식별하십시오. 이는 최적화 노력을 효과적으로 집중하는 데 도움이 됩니다.
• 셀렉터는 간단하게 유지하기: 셀렉터 함수는 가능한 한 간단하고 효율적이어야 합니다. 셀렉터 내에서 복잡한 로직이나 비용이 많이 드는 계산을 피하십시오.
• 필요할 때 메모이제이션 사용하기: 셀렉터 함수가 props나 자주 변경될 수 있는 다른 변수에 의존하는 경우, useCallback을 사용하여 셀렉터 함수를 메모이제이션하십시오.
• 구현을 철저히 테스트하기: 예상치 못한 동작이나 회귀를 방지하기 위해 experimental_useContextSelector 구현을 철저히 테스트하십시오.
• 대안 고려하기: experimental_useContextSelector에 의존하기 전에 React.memo나 useMemo와 같은 다른 최적화 기법을 평가하십시오. 때로는 더 간단한 해결책으로 원하는 성능 향상을 달성할 수 있습니다.
• 사용법 문서화하기: experimental_useContextSelector를 어디서 왜 사용하는지 명확하게 문서화하십시오. 이는 다른 개발자들이 코드를 이해하고 미래에 유지보수하는 데 도움이 될 것입니다.

다른 최적화 기법과의 비교

experimental_useContextSelector는 컨텍스트 최적화를 위한 강력한 도구이지만, React의 다른 최적화 기법과 어떻게 비교되는지 이해하는 것이 중요합니다:

• React.memo: React.memo는 함수형 컴포넌트를 메모이제이션하는 고차 컴포넌트(HOC)입니다. props가 변경되지 않았다면(얕은 비교) 리렌더링을 방지합니다. experimental_useContextSelector와 달리, React.memo는 컨텍스트 변경이 아닌 prop 변경을 기반으로 최적화합니다. props를 자주 받고 렌더링 비용이 비싼 컴포넌트에 가장 효과적입니다.
• useMemo: useMemo는 함수 호출 결과를 메모이제이션하는 훅입니다. 의존성이 변경되지 않는 한 함수가 다시 실행되는 것을 방지합니다. useMemo를 사용하여 컴포넌트 내의 파생 데이터를 메모이제이션하여 불필요한 재계산을 방지할 수 있습니다.
• useCallback: useCallback은 함수를 메모이제이션하는 훅입니다. 의존성이 변경되지 않는 한 함수가 다시 생성되는 것을 방지합니다. 이는 자식 컴포넌트에 함수를 props로 전달할 때 유용하며, 불필요한 리렌더링을 방지합니다.
• Redux 셀렉터 함수 (Reselect 사용): Redux와 같은 라이브러리는 Redux 스토어에서 데이터를 효율적으로 파생시키기 위해 셀렉터 함수(주로 Reselect와 함께)를 사용합니다. 이 셀렉터들은 experimental_useContextSelector와 함께 사용되는 셀렉터 함수와 개념적으로 유사하지만, Redux에 특화되어 있으며 Redux 스토어의 상태에 대해 작동합니다.

최상의 최적화 기법은 특정 상황에 따라 다릅니다. 최적의 성능을 달성하기 위해 이러한 기법들을 조합하여 사용하는 것을 고려하십시오.

코드 예제: 더 복잡한 시나리오

더 복잡한 시나리오를 고려해 보겠습니다: 전역 작업 컨텍스트가 있는 작업 관리 애플리케이션입니다.

            import { unstable_useContextSelector as useContextSelector } from 'react';

const TaskContext = React.createContext({
  tasks: [],
  addTask: () => {},
  updateTaskStatus: () => {},
  deleteTask: () => {},
  filter: 'all',
  setFilter: () => {}
});

function TaskList() {
  const filteredTasks = useContextSelector(TaskContext, (value) => {
    switch (value.filter) {
      case 'active':
        return value.tasks.filter((task) => !task.completed);
      case 'completed':
        return value.tasks.filter((task) => task.completed);
      default:
        return value.tasks;
    }
  });

  return (
    <ul>
      {filteredTasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

function TaskFilter() {
  const { filter, setFilter } = useContextSelector(TaskContext, (value) => ({
    filter: value.filter,
    setFilter: value.setFilter
  }));

  return (
    <div>
      <button onClick={() => setFilter('all')}>All</button>
      <button onClick={() => setFilter('active')}>Active</button>
      <button onClick={() => setFilter('completed')}>Completed</button>
    </div>
  );
}

function TaskAdder() {
  const addTask = useContextSelector(TaskContext, (value) => value.addTask);
  const [newTaskTitle, setNewTaskTitle] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTask({ id: Date.now(), title: newTaskTitle, completed: false });
    setNewTaskTitle('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={newTaskTitle}
        onChange={(e) => setNewTaskTitle(e.target.value)}
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

            

              
                Copy
              
            
          

이 예제에서는:

• TaskList는 filter나 tasks 배열이 변경될 때만 리렌더링됩니다.
• TaskFilter는 filter나 setFilter 함수가 변경될 때만 리렌더링됩니다.
• TaskAdder는 addTask 함수가 변경될 때만 리렌더링됩니다.

이 선택적 렌더링은 작업 컨텍스트가 자주 변경될 때에도 업데이트가 필요한 컴포넌트만 리렌더링되도록 보장합니다.

결론

experimental_useContextSelector는 React Context 사용을 최적화하고 애플리케이션 성능을 향상시키는 데 유용한 도구입니다. 컨텍스트 값의 특정 부분에 선택적으로 구독함으로써 불필요한 리렌더링을 줄이고 애플리케이션의 전반적인 반응성을 향상시킬 수 있습니다. 현명하게 사용하고, 잠재적인 단점을 고려하며, 구현을 철저히 테스트하는 것을 잊지 마십시오. 이 최적화를 구현하기 전후에 항상 프로파일링하여 상당한 차이를 만들어내고 있는지, 그리고 예기치 않은 부작용을 일으키지 않는지 확인하십시오.

React가 계속 발전함에 따라, 새로운 기능과 최적화를 위한 모범 사례에 대한 정보를 계속 접하는 것이 중요합니다. experimental_useContextSelector와 같은 컨텍스트 최적화 기술을 마스터하면 더 효율적이고 성능이 뛰어난 React 애플리케이션을 구축할 수 있습니다.

더 알아보기

• React 공식 문서: 실험적 API에 대한 업데이트는 공식 React 문서를 주시하십시오.
• 커뮤니티 포럼: 포럼이나 소셜 미디어에서 React 커뮤니티와 교류하며 다른 개발자들의 experimental_useContextSelector 사용 경험으로부터 배우십시오.
• 실험: 자신의 프로젝트에서 experimental_useContextSelector를 실험하여 그 기능과 한계에 대한 더 깊은 이해를 얻으십시오.